<template>
  <div id="app">
    <HeadTop @changeAppLocale="changeAppLocale" v-bind:lang="lang"/>
    <FooterBottom/>
  </div>
</template>

<script type="es6">
  import HeadTop from "./components/Header"
  import FooterBottom from "./components/Footer"

  export default {
    name: 'app',
    data(){
      return{
        lang: ''
      }
    },
    components:{
      HeadTop,
      FooterBottom,
    },
    methods:{
      changeLanguage(lang){
        this.$i18n.locale=lang;
        this.lang=lang;
      },
      changeAppLocale(locale){
        this.changeLanguage(locale);
        this.$router.push({name: this.$route.name, params: {lang: this.lang}})
      }
    },
    mounted(){
      this.changeLanguage(this.$route.params.lang);
    }
  }
</script>

<style scoped>

</style>
